<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="js/knockoutjs.js"></script>
	<script type="text/javascript" src="js/sampleProductCategories.js"></script>
</head>
<body>
	<table width="100%">
		<thead>
			<tr>
				<th width="25%">Category</th>
				<th width="25%">Product</th>
				<th class="price" width="15%">Price</th>
				<th class="quantity" width="10%">Quantity</th>
				<th class="price" width="15%">Subtotal</th>
				<th width="10%"></th>
			</tr>
		</thead>
		<tbody data-bind="foreach:lines">
			<tr>
				<td>
					<select data-bind='options:sampleProductCategories,optionsText:"name",optionsCaption:"Select...",value:category'></select>
				</td>
				<td data-bind="with:category">
					<select data-bind='options:products,optionsText:"name",optionsCaption:"Select...",value:$parent.product'></select>
				</td>
				<td class="price" data-bind="with:product">
					<span data-bind="text:formatCurrency(price)"></span>
				</td>
				<td class="quantity">
					<input type="text" data-bind='visible:product,value:quantity,valueUpdate:"afterkeydown"'>
				</td>
				<td class="price">
					<span data-bind="visible:product,text:formatCurrency(subtotal())"></span>
				</td>
				<td>
					<a href="" data-bind="click:$parent.removeLine">Remove</a>
				</td>
			</tr>
		</tbody>
	</table>
	<p class="grandTotal">
		Total Value: <span data-bind='text:formatCurrency(grandTotal())'></span>
	</p>
	<button data-bind="click:addLine">Add product</button>
	<button data-bind="click:save">Submit order</button>
</body>
<script>
	function formatCurrency(value){
		return "$"+value.toFixed(2);
	}

	var CartLine = function(){
		var self = this;
		self.category = ko.observable();
		self.product = ko.observable();
		self.quantity = ko.observable(1);
		self.subtotal = ko.pureComputed(function(){
			return self.product() ? self.product().price * parseInt("0" + self.quantity(),10) : 0;
		});

		self.category.subscribe(function(){
			self.product(undefined);
		});
	};

	var Cart = function(){
		var self = this;
		self.lines = ko.observableArray([new CartLine()]);
		self.grandTotal = ko.pureComputed(function(){
			var total =0;
			$.each(self.lines(),function(){
				total += this.subtotal();
			});
			return total;
		});

		self.addLine = function(){
			self.lines.push(new CartLine());
		};
		self.removeLine = function(line){
			self.lines.remove(line);
		};
		self.save = function(){
			var dataToSave = $.map(self.lines(),function(line){
				return line.product() ? {
					productName:line.product().name,
					quantity:line.quantity()
				} : undefined;
			});
			alert("Could now send this to server: " + JSON.stringify(dataToSave));
		};
	};

	ko.applyBindings(new Cart());
</script>
</html>